---
section: Typography
title: Whitespace
slug: /docs/whitespace/
---

# Whitespace

Utilities for controlling an element's white-space property.

<carbon-ad />

| React props          | CSS Properties          |
| -------------------- | ----------------------- |
| `whiteSpace={value}` | `white-space: {value};` |

## Normal

Use `whiteSpace="normal"` to cause text to wrap normally within an element. Newlines and spaces will be collapsed.

```jsx preview color=indigo
<>
  <template preview>
    <x.div w={3 / 4} px={6} py={4} bg="indigo-200" borderRadius="lg">
      <x.div
        whiteSpace="normal"
        fontFamily="Flow"
        color="indigo-500"
        fontSize="3xl"
        lineHeight={5}
      >
        {`Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure,
      eum natus enim maxime
      laudantium quibusdam illo nihil,

  reprehenderit saepe quam aliquid odio accusamus.`}
      </x.div>
    </x.div>
  </template>
  <x.div w={3 / 4}>
    <x.div whiteSpace="normal">
      {`Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure,
      eum natus enim maxime
      laudantium quibusdam illo nihil,

  reprehenderit saepe quam aliquid odio accusamus.`}
    </x.div>
  </x.div>
</>
```

## No Wrap

Use `whiteSpace="nowrap"` to prevent text from wrapping within an element. Newlines and spaces will be collapsed.

```jsx preview color=emerald
<>
  <template preview>
    <x.div
      w={3 / 4}
      px={6}
      py={4}
      bg="emerald-200"
      borderRadius="lg"
      overflowX="auto"
    >
      <x.div
        whiteSpace="nowrap"
        fontFamily="Flow"
        color="emerald-500"
        fontSize="3xl"
        lineHeight={5}
      >
        {`Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure,
      eum natus enim maxime
      laudantium quibusdam illo nihil,

  reprehenderit saepe quam aliquid odio accusamus.`}
      </x.div>
    </x.div>
  </template>
  <x.div w={3 / 4} overflowX="auto">
    <x.div whiteSpace="nowrap">
      {`Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure,
      eum natus enim maxime
      laudantium quibusdam illo nihil,

  reprehenderit saepe quam aliquid odio accusamus.`}
    </x.div>
  </x.div>
</>
```

## Pre

Use `whiteSpace="pre"` to preserve newlines and spaces within an element. Text will not be wrapped.

```jsx preview color=amber
<>
  <template preview>
    <x.div
      w={3 / 4}
      px={6}
      py={4}
      bg="amber-200"
      borderRadius="lg"
      overflowX="auto"
    >
      <x.div
        whiteSpace="pre"
        fontFamily="Flow"
        color="amber-500"
        fontSize="3xl"
        lineHeight={5}
      >
        {`Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure,
      eum natus enim maxime
      laudantium quibusdam illo nihil,

  reprehenderit saepe quam aliquid odio accusamus.`}
      </x.div>
    </x.div>
  </template>
  <x.div w={3 / 4} overflowX="auto">
    <x.div whiteSpace="pre">
      {`Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure,
      eum natus enim maxime
      laudantium quibusdam illo nihil,

  reprehenderit saepe quam aliquid odio accusamus.`}
    </x.div>
  </x.div>
</>
```

## Pre Line

Use `whiteSpace="pre-line"` to preserve newlines but not spaces within an element. Text will be wrapped normally.

```jsx preview color=light-blue
<>
  <template preview>
    <x.div
      w={3 / 4}
      px={6}
      py={4}
      bg="light-blue-200"
      borderRadius="lg"
      overflowX="auto"
    >
      <x.div
        whiteSpace="pre-line"
        fontFamily="Flow"
        color="light-blue-500"
        fontSize="3xl"
        lineHeight={5}
      >
        {`Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure,
      eum natus enim maxime
      laudantium quibusdam illo nihil,

  reprehenderit saepe quam aliquid odio accusamus.`}
      </x.div>
    </x.div>
  </template>
  <x.div w={3 / 4} overflowX="auto">
    <x.div whiteSpace="pre-line">
      {`Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure,
      eum natus enim maxime
      laudantium quibusdam illo nihil,

  reprehenderit saepe quam aliquid odio accusamus.`}
    </x.div>
  </x.div>
</>
```

## Pre Wrap

Use `whiteSpace="pre-wrap"` to preserve newlines and spaces within an element. Text will be wrapped normally.

```jsx preview color=red
<>
  <template preview>
    <x.div
      w={3 / 4}
      px={6}
      py={4}
      bg="red-200"
      borderRadius="lg"
      overflowX="auto"
    >
      <x.div
        whiteSpace="pre-wrap"
        fontFamily="Flow"
        color="red-500"
        fontSize="3xl"
        lineHeight={5}
      >
        {`Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure,
      eum natus enim maxime
      laudantium quibusdam illo nihil,

  reprehenderit saepe quam aliquid odio accusamus.`}
      </x.div>
    </x.div>
  </template>
  <x.div w={3 / 4} overflowX="auto">
    <x.div whiteSpace="pre-wrap">
      {`Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure,
      eum natus enim maxime
      laudantium quibusdam illo nihil,

  reprehenderit saepe quam aliquid odio accusamus.`}
    </x.div>
  </x.div>
</>
```

## Responsive

To control the whitespace property of an element at a specific breakpoint, use responsive object notation. For example, adding the property `whiteSpace={{ md: "pre" }}` to an element would apply the `whiteSpace="pre"` utility at medium screen sizes and above.

```jsx
<x.div whiteSpace={{ md: 'pre' }}>{/* ... */}</x.div>
```

For more information about xstyled's responsive design features, check out [Responsive Design](/docs/responsive-design/) documentation.
